<script setup lang="ts">
import { getGrantURL } from "@/api/withdrawal";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { computed, ref, onMounted, reactive } from "vue";
import { toDataURL } from 'qrcode'
import { message } from "@/utils/message";
import jinyuanBg from '@/assets/withdraw/bag_dhyb_db1@1x.png?url'
import widthdrawBg from '@/assets/withdraw/bag_dhyb_db2@1x.png?url'
import jingyuan from '@/assets/withdraw/jinyuan.png?url'
import translet from '@/assets/withdraw/translet@1x.png?url'
import alipayLogo from '@/assets/withdraw/alipay_logo_120x120.png?url'
const env = import.meta.env
const oringalValue = ref(10000);
const currentMaxValue = ref(9999999999);
const millennialsIntl = new Intl.NumberFormat("zh-cn", {
  style: "decimal",
});
const cnyIntl = new Intl.NumberFormat("zh-cn", {
  style: "currency",
  currency: "cny"
});
const canbeGetCNY = computed(() => {
  const relvalue = oringalValue.value / 100;
  return cnyIntl.format(relvalue);
});

function formatter(value: string) {
  const inputValue = parseInt(value, 10);
  if (!isNaN(inputValue)) {
    oringalValue.value = inputValue;
  }
}
const disabledPlus = computed(() => {
  return oringalValue.value >= currentMaxValue.value;
});

/**
 * 二维码授权信息
 */

const bindingInfo = reactive({
  dataURL: '',
  error: false,
  loading: true,
  binded: false
})
onMounted(() => {
  getGrantURL()
    .then(({ data }) => {
      /* bindingInfo.dataURL = alipayLogo
      bindingInfo.binded = true */
      if (data.url) {
        toDataURL(data.url).then(url => bindingInfo.dataURL = url)
      } else {
        console.log('已经授权逻辑');
        bindingInfo.binded = true
        bindingInfo.dataURL = alipayLogo
      }
    }, e => {
      bindingInfo.error = true
      message(e.message, {
        type: 'error'
      })
    }).finally(() => {
      bindingInfo.loading = false
    })
});
</script>

<template>
  <ElCard class="h-full" body-class="h-full mt-12">
    <ElForm label-position="top" class="demo-form-inline w-2/3 mx-auto">
      <div class="flex justify-center lg:gap-12 md:gap-4 items-center">
        <div class="size-40">
          <div class="size-full flex flex-col items-center justify-center"
            :style="{ backgroundImage: `url(${jinyuanBg})`, backgroundSize: '100% 100%' }">
            <img class="size-2/5" :src="jingyuan" alt="金元币">
            <div class="text-sm">
              <span class="text-amber-400">{{ millennialsIntl.format(currentMaxValue) }}</span>
              <span class="text-orange-300">金元</span>
            </div>
          </div>
        </div>
        <div class="text-4xl">
          <img class="size-12" :src="translet" alt="转换/体现" srcset="">
        </div>
        <div class="size-36" v-loading="bindingInfo.loading">
          <div v-if="bindingInfo.binded && bindingInfo.dataURL" class="p-4 size-full flex flex-col gap-4 justify-center"
            :style="{ backgroundImage: `url(${widthdrawBg})`, backgroundSize: '100% 100%' }">
            <span class="pl-2 text-sm">到账账户</span>
            <img class="size-1/3 self-center" :src="bindingInfo.dataURL" alt="金元币">
            <span class="text-sm self-center">账户名区域</span>
          </div>
          <div v-else-if="bindingInfo.dataURL && !bindingInfo.binded"
            class="p-4 size-full flex flex-col gap-1 items-center justify-center">
            <img class="size-full" :src="bindingInfo.dataURL" />
            <span class="text-sm">支付宝绑定</span>
          </div>
        </div>

        <!-- <ElFormItem class="grow basis-1/4" label="到账账户"> -->

        <!-- <ElSelect class="">
            <ElOption v-for="item in [
              { label: '支付宝', value: 'alipay' },
              { label: '微信', value: 'wechat' },
              { label: '银行卡', value: 'bank' }
            ]" :key="item.value" :label="item.label" :value="item.value" />
          </ElSelect> -->
        <!-- </ElFormItem> -->
      </div>
      <ElFormItem class="mx-auto w-80 mt-4">
        <ElInput size="large" :model-value="oringalValue" maxlength="10" @input="formatter">
          <template #prefix>
            <img :src="jingyuan" class="size-7" alt="">
          </template>
        </ElInput>


        <div class="w-full flex justify-center mt-2">
          <ElButtonGroup>
            <ElButton type="success" plain :disabled="disabledPlus" @click="oringalValue += 100"
              :icon="useRenderIcon('ep:plus')">100
            </ElButton>
            <ElButton type="success" plain :disabled="disabledPlus" @click="oringalValue += 500"
              :icon="useRenderIcon('ep:plus')">500
            </ElButton>
            <ElButton type="success" plain :disabled="disabledPlus" @click="oringalValue += 1000"
              :icon="useRenderIcon('ep:plus')">1000
            </ElButton>
            <ElButton type="success" plain @click="oringalValue = currentMaxValue">max</ElButton>
          </ElButtonGroup>
        </div>
        <div class="mt-4 w-full flex text-red-400 gap-4 justify-between">
          <span>可获得</span>
          <span>{{ canbeGetCNY }}</span>
        </div>
      </ElFormItem>



      <div class="text-center mt-8">
        <ElButton color="#626aef" type="warning" class="w-96">提现</ElButton>
      </div>
    </ElForm>
  </ElCard>
</template>

<style lang="scss" scoped>
/* .demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
} */
</style>
